<template>
  <el-dialog
    :close-on-click-modal="false"
    width="45%"
    :title="title"
    :visible.sync="visible"
    :before-close="close"
    lock-scroll
    append-to-body
  >
    <el-form
      status-icon
      :rules="rules"
      :model="datas"
      @keyup.enter.native="save"
      ref="editForm"
    >
      <el-row :gutter="10">
        <el-col :span="23">
          <el-form-item
            prop="key"
            label="域唯一标识"
            :label-width="baseStyle.width"
          >
            <el-input
              v-model="datas.key"
              :readonly="false"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item
            prop="domain"
            label="域名称"
            :label-width="baseStyle.width"
          >
            <el-input
              v-model="datas.domain"
              :readonly="false"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item
            prop="exp_time"
            label="过期时间"
            :label-width="baseStyle.width"
          >
            <el-date-picker
              v-model="datas.exp_time"
              :picker-options="pickeroptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :type="'primary'" :loading="loading" @click.native="save()"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";

export default {
  name: "ClassicForm",
  props: {
    visible: Boolean,
    baseStyle: Object,
    title: String,
    datas: {
      type: Object,
      default: function () {
        return { key: "", domain: "", exp_time: "" };
      },
    },
    saveForm: Function,
  },
  data() {
    const rules = this.getRules();
    return {
      loading: false,
      rules,
      pickeroptions: {
        disabledDate: (time) => {
          let one = 24 * 60 * 60 * 1000;
          return time.getTime() < Date.now() - one; // 返回 所有时间 大于 当前时间前一天时间
        },
      },
    };
  },
  computed: {},
  created() {},
  methods: {
    cancel() {
      this.loading = false;
      this.$emit("update:visible", false);
      this.$refs.editForm.resetFields();
    },
    close() {
      this.cancel();
    },
    save() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$emit("saveForm", { ...this.datas });
          // this.cancel();
        } else {
          return false;
        }
      });
    },
    getRules() {
      return {
        key: [
          {
            validator: (rule, value, callback) => {
              if (!this.datas.key) {
                callback(new Error(`请填写域唯一标识`));
                return;
              }
              if (this.datas.key.trim().length < 1) {
                callback(new Error(`请填写域唯一标识`));
                return;
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        domain: [
          {
            validator: (rule, value, callback) => {
              if (!this.datas.domain) {
                callback(new Error(`请填写域名称`));
                return;
              }
              if (this.datas.domain.trim().length < 1) {
                callback(new Error(`请填写域名称`));
                return;
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        exp_time: [
          {
            validator: (rule, value, callback) => {
              if (!this.datas.exp_time) {
                callback(new Error(`请选择过期时间`));
                return;
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
</style>